<template>
	<view class="index-wrapper">
		<image src="../../static/images/index/indexbg.png" class="bg" mode="widthFix"></image>
		<view class="index-main">
			<view class="index-header">
				<view class="t1">湖南长沙市第一人民医院</view>
				<view class="t2">科室和病区的名称</view>
			</view>
			<view class="index-search">
				<view class="flex_bd">
					<input type="text" class="search-input" value="" placeholder="快速搜索患者身份信息"/>
				</view>
				<view class="search-btn">搜索</view>
			</view>
			<view class="enter-card">
				<view class="enter-lg">
					<view class="t1">快速扫描</view>
					<view class="t2">导入患者信息</view>
					<image src="../../static/images/index/s-lg.png" class="ic1" mode=""></image>
				</view>
				<view class="flex_bd">
					<view class="enter-md" @click="openUrl('/pages/beHospital/index')">
						<view class="t1">入院</view>
						<view class="t2">提取患者身份/识别</view>
						<image src="../../static/images/index/lou.png" class="ic2" mode=""></image>
					</view>
					<view class="enter-md">
						<view class="t1">查患者</view>
						<view class="t2">查看患者实时情况</view>
						<image src="../../static/images/index/ren.png" class="ic3" mode=""></image>
					</view>
				</view>
			</view>
			<!-- list -->
			<view class="filter-cell flex-center justify-zBetween">
				<view class="fil-title">患者列表</view>
				<view class="fil-dg">
					<view class="fil-dg-bar" @click="gClick">
						<text>所有导管</text><text class="iconfont icon-htbArrowright02"></text>
					</view>
					<!-- 下拉 -->
					<view class="fil-dropment center" v-if="gshow">
						<radio-group @change="radioChange">
							<label class="fil-item flex-center" v-for="(item, index) in items" :key="item.value">
								<view class="flex_bd">{{item.name}}</view>
								<radio style="transform: scale(.8);" :color="item.color" :value="item.value" :checked="index === current" />
							</label>
						</radio-group>
					</view>
				</view>
				<view class="fil-dg">
					<view class="fil-dg-bar" @click="gClick2">
						<text>排序</text><text class="iconfont icon-htbArrowright02"></text>
					</view>
					<!-- 下拉 -->
					<view class="fil-dropment center" v-if="gshow2">
						<radio-group @change="radioChange2">
							<label class="fil-item flex-center" v-for="(item, index) in items2" :key="item.value">
								<view class="flex_bd">{{item.name}}</view>
								<radio style="transform: scale(.8);" :color="item.color" :value="item.value" :checked="index === current2" />
							</label>
						</radio-group>
					</view>
				</view>
				<view class="fil-tip">
					<view class="fil-tip-bar" @click="tClick">
						<text>说明</text><text class="iconfont icon-tishi"></text>
					</view>
					<view class="fil-dropment right" v-if="tipshow">
						<view class="fil-item flex-center"><view class="flex_bd"><text>导管4h过期或已过期</text></view><text style="background-color: #f34b33;" class="dot"></text></view>
						<view class="fil-item flex-center"><view class="flex_bd"><text>24h内过期导管</text></view><text style="background-color: #ffa200;" class="dot"></text></view>
						<view class="fil-item flex-center"><view class="flex_bd"><text>所有正常导管</text></view><text style="background-color: #19bc6f;" class="dot"></text></view>
					</view>
				</view>
			</view>
			<view class="bed-cells">
				<u-row gutter="16">
					<u-col span="3" >
						<view class="bed-card bed-danger-bg" @click="openUrl('/pages/index/patientDetail')">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box box-danger">01</view>
							</view>
							<view class="n text-danger">01</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card" @click="openUrl('/pages/index/patientDetail')">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">02</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card" @click="openUrl('/pages/index/patientDetail')">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">03</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card" @click="openUrl('/pages/index/patientDetail')">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">04</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n text-success">05</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n text-warning">06</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box box-success">01</view>
								<view class="box box-warning">01</view>
							</view>
							<view class="n">07</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box box-success">01</view>
							</view>
							<view class="n">08</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box box-success">01</view>
							</view>
							<view class="n">09</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">10</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card bed-danger-bg">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">11</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">12</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box box-success">01</view>
							</view>
							<view class="n">08</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box box-success">01</view>
							</view>
							<view class="n">09</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">10</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">11</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">03</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n">04</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n text-success">05</view>
						</view>
					</u-col>
					<u-col span="3" >
						<view class="bed-card">
							<view class="bed-hd">A1床</view>
							<view class="u-name">杨飘逸</view>
							<view class="bed-bar">
								<view class="box">01</view>
							</view>
							<view class="n text-warning">06</view>
						</view>
					</u-col>
				</u-row>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tipshow:false,
				bedList:[],
				gshow:false,
				items: [{
						value: 'USA',
						name: '所有导管',
						color:'#00a4e8',
						checked: 'true'
					},
					{
						value: 'CHN',
						name: '今日到期导管',
						color:'#ffa406',
					},
					{
						value: 'BRA',
						name: '未到期导管',
						color:'#19bc6f',
					},
					{
						value: 'JPN',
						name: '已到期导管',
						color:'#f84949',
					},
				],
				current: 0,
				gshow2:false,
				items2: [{
						value: 'USA',
						name: '排序11111',
						color:'#00a4e8',
						checked: 'true'
					},
					{
						value: 'CHN',
						name: '排序2222',
						color:'#ffa406',
					},
					{
						value: 'BRA',
						name: '排序3333',
						color:'#19bc6f',
					},
					{
						value: 'JPN',
						name: '排序4444',
						color:'#f84949',
					},
				],
				current2: 0
			}
		},
		onLoad() {
			
		},
		methods: {
			openUrl(e) {
				console.log(e)
				uni.navigateTo({
					url:e
				});
			},
			tClick(){
				this.tipshow = !this.tipshow
			},
			gClick(){
				this.gshow = !this.gshow
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
				this.gshow = false
			},
			gClick2(){
				this.gshow2 = !this.gshow2
			},
			radioChange2: function(evt) {
				for (let i = 0; i < this.items2.length; i++) {
					if (this.items2[i].value === evt.detail.value) {
						this.current2 = i;
						break;
					}
				}
				this.gshow2 = false
			}
		}
	}
</script>

<style lang="scss">
	// 患者列表
	.text-danger{
		color: #f92a2a!important;
	}
	.text-warning{
		color: #ff8400!important;
	}
	.text-success{
		color: #0dbf72!important;
	}
	.bed-cells{
		margin: 0 -8rpx;
	}
	.bed-card{
		position: relative;
		margin-bottom: 1;
		line-height: 1.2;
		padding: 20rpx 12rpx;
		margin-bottom: 16rpx;
		height: 166rpx;
		border-radius: 12px;
		background-color: #f6f6f8;
		overflow: hidden;
		.n{
			position: absolute;
			right: 1px;
			top: 1px;
			font-size: 22rpx;
			width: 40rpx;
			height: 40rpx;
			background-color: #FFFFFF;
			border-radius: 0 12rpx 0 12rpx;
			color: #00a4e8;
			text-align: center;
			line-height: 40rpx;

		}
		.bed-hd{
			color: #596371;
			font-size: 26rpx;
			height: 52rpx;
		}
		.u-name{
			color: #373b4f;
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.bed-bar{
			display: flex;
			.box{
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 3px;
				background-color: #00a4e8;
				color: #FFFFFF;
				font-size: 22rpx;
				margin-right: 8rpx;
			}
			.box-warning{
				background-color: #ffa200;
			}
			.box-success{
				background-color: #19bc6f;
			}
			.box-danger{
				background-color: #f84949;
			}
		}
		
	}
	.bed-danger-bg{
		background-color: #fff4f4;
	}
	//111111111111end
	// 下拉
	.fil-dropment{
		padding:10rpx 18rpx;
		border-radius: 10rpx;
		box-shadow: 0 0 10px rgba(0,64,116,.24);
		position: absolute;
		top: 60rpx;
		background-color: #FFFFFF;
		width: 260rpx;
		.fil-item{
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			color: #373b4f;
			font-size: 26rpx;
			border-bottom: 1px solid #eeeeee;
		}
		.fil-item:last-child{
			border-bottom: 0;
		}
		&::after{
			width: 10px;
			height: 10px;
			background-color: #FFFFFF;
			content: '';
			position: absolute;
			top: -10rpx;
			left: 50%;
			transform: rotateZ(45deg);
		}
	}
	.fil-dropment.center{
		left: 50%;
		margin-left: -130rpx;
	}
	.fil-dropment.right{
		right: 0;
		width: 330rpx;
		.dot{
			display: block;
			width: 24rpx;
			height: 24rpx;
			border-radius: 24rpx;
		}
		&::after{
			left: auto;
			right: 40rpx;
		}
	}
	.filter-cell{
		position: relative;
		z-index: 99;
		margin-bottom: 30rpx;
		line-height: 1.2;
		.fil-title{
			font-weight: bold;
			font-size: 34rpx;
		}
		.fil-dg{
			position: relative;
			.fil-dg-bar{
				color: #72717c;
				font-size: 28rpx;
			}
		}
		.fil-tip{
			position: relative;
			.fil-tip-bar{
				background-color: #e9f1fa;
				color: #2673cb;
				height: 36rpx;
				line-height: 36rpx;
				padding: 0 10rpx;
				border-radius: 3px;
				font-size: 24rpx;
				.iconfont{
					font-size: 24rpx;
					padding-left: 3px;
				}
			}
		}
	}
	
	.index-wrapper{
		background-color: #FFFFFF;
		min-height: 100vh;
		position: relative;
		background-size: contain;
		.bg{
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
		}
		.index-main{
			position: relative;
			padding: 110rpx 30rpx 30rpx 30rpx;
			z-index: 77;
		}
	}
	.enter-card{
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0 2px 16px rgba(0,0,0,.12);
		border-radius: 16rpx;
		padding: 16rpx;
		margin-bottom: 40rpx;
	}
	.enter-lg{
		position: relative;
		border-radius: 16rpx;
		padding: 26rpx 30rpx;
		width: 320rpx;
		height: 320rpx;
		margin-right: 16rpx;
		background-image: linear-gradient(to top right, #0092d5 , #57beed);
		color: #FFFFFF;
		.t1{
			font-size: 40rpx;
			margin-bottom: 10rpx;
			font-weight: bold;
		}
		.t2{
			font-size: 20rpx;
		}
		.ic1{
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			width: 156rpx;
			height: 156rpx;
		}
	}
	.enter-md{
		position: relative;
		border-radius: 16rpx;
		padding: 26rpx 20rpx;
		width: 320rpx;
		height: 152rpx;
		margin-right: 16rpx;
		background-image: linear-gradient(to top right, #2673cb , #71aaf9);
		color: #FFFFFF;
		&:first-child{
			margin-bottom: 16rpx;
		}
		.t1{
			font-size: 36rpx;
			margin-bottom: 10rpx;
			font-weight: bold;
			position: relative;z-index: 7;
		}
		.t2{
			position: relative;z-index: 7;
			font-size: 20rpx;
			transform: scale(.88);
			transform-origin: left;
		}
		.ic2{
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			width: 90rpx;
			height: 100rpx;
		}
		.ic3{
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
			width: 100rpx;
			height: 80rpx;
		}
	}
	
	.index-search{
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border-radius: 50px;
		padding: 0 10rpx 0 30rpx;
		height: 72rpx;
		margin-bottom: 30rpx;
		.search-input{
			border: 0;
			width: 100%;
			font-size: 28rpx;
		}
		.search-btn{
			background-color: #009fe8;
			color: #FFFFFF;
			border-radius: 40px;
			text-align: center;
			line-height: 60rpx;
			height: 60rpx;
			width: 106rpx;
		}
	}
	.index-header{
		color: #FFFFFF;
		margin-bottom: 30rpx;
		.t1{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 10rpx;
		}.t2{
			font-size:28rpx;
		}
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
</style>
